<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       /* 
       WebStorage:
            localStorage(本地存储，在本地永久性存储数据)
            sessionStorage(会话存储，存储的数据只在会话期间有效，关闭浏览器则自动删除) */
            

      
        function doWrite(){
            var username=document.getElementById("username").value;//获取文本框中的值
            var password=document.getElementById("password").value;//获取文本框中的值
            // 1.方式一：如果属性命名规范， localStorage.属性名=属性值    sessionStorage.属性名=属性值 
            // localStorage.username=username;
            // localStorage.password=password;
            // sessionStorage.sex="男";
            // localStorage.js-score=100;报错，属性命名不规范



            // 2.方式二: localStorage["属性名"]=属性值    sessionStorage["属性名"]=属性值 
            // localStorage["username"]=username;
            // localStorage["password"]=password;
            // localStorage["js-score"]=96;
            // sessionStorage["css-score"]=94;

            // 方式三：localStorage.setItem(key,value)  sessionStorage.setItem(key,value)  写入数据，添加/修改键值对 
            localStorage.setItem("username",username);
            localStorage.setItem("password",password);
            localStorage.setItem("js-score",96);

            sessionStorage.setItem("css-score",100);
           
        }
        function doRead(){
            console.log(localStorage);
            console.log(sessionStorage);//sessionStorage只能在当前页面中访问，打开新的标签页中是无法访问的
            console.log(localStorage.length);//获取键值对的数量
            console.log(sessionStorage.length);

            // 获取指定属性值   localStorage.属性名(获取命名规范)
            // console.log(localStorage.username);

            //获取指定属性值  localStorage["属性名"] (获取命名规范或者不规范的属性都可以)
            // console.log(localStorage["js-score"]);


            //获取指定属性值 localStorage.getItem(key)   sessionStorage.getItem(key)根据对应的属性名(key)获取对应的值
            // console.log(localStorage.getItem("username"));
            // console.log(localStorage.getItem("js-score"));



        }

        function doRemove(){
            // localStorage.removeItem(key)    sessionStorage.removeItem(key) 根据属性名(key)删除对应的值
            // localStorage.removeItem("username");
            localStorage.clear();//清空localStorage

        }

        function getVal(attr){
            // console.log(localStorage.attr);//不能使用此方式，会将attr作为localStorage中的属性名
            // console.log(localStorage[attr]);
            console.log(localStorage.getItem(attr));
        }
        function doKey(){
            console.log(localStorage);

            // localStorage.key(索引) sessionStorage.key(索引)
            console.log(localStorage.key(2));//根据索引来获取对应的键(根据索引来获取对应的属性名key)
        }
    </script>
</head>
<body>
    用户名:<input type="text" id="username"><br>
    密码:<input type="password" id="password"><br>
    <input type="button" value="写入WebStorage" onclick="doWrite()">
    <input type="button" value="读取WebStorage" onclick="doRead()">
    <input type="button" value="删除" onclick="doRemove()">
    <input type="button" value="根据key名获取对应的值(根据属性名来获取对应的值)username" onclick="getVal('username')">
    <input type="button" value="根据key名获取对应的值(根据属性名来获取对应的值)password" onclick="getVal('password')">
    <input type="button" value="根据key名获取对应的值(根据属性名来获取对应的值)js-score" onclick="getVal('js-score')">
    <input type="button" value="根据索引获取对应的键" onclick="doKey()">
</body>
</html>